// DOM Elements
const waitlistForm = document.getElementById('waitlist-form');
const sampleButton = document.getElementById('see-sample');
const modal = document.getElementById('sample-modal');
const closeModal = document.querySelector('.close');
const testimonials = document.querySelectorAll('.testimonial');
const navWaitlistBtns = document.querySelectorAll('.navbar .btn-primary, .nav-right .btn-primary');

// Waitlist Form Submission
if (waitlistForm) {
    waitlistForm.addEventListener('submit', async (e) => {
        e.preventDefault();
        
        const emailInput = waitlistForm.querySelector('input[type="email"]');
        const email = emailInput.value;
        const submitBtn = waitlistForm.querySelector('button[type="submit"]');
        
        // Disable form during submission
        submitBtn.disabled = true;
        const originalText = submitBtn.textContent;
        submitBtn.textContent = 'Submitting...';
        
        try {
            // 方案一：使用Formspree服务
            const response = await fetch('https://formspree.io/f/mqabrgep', {
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ 
                    email: email,
                    message: 'New waitlist signup for ATP',
                    source: 'ATP Website'
                })
            });
            
            if (response.ok) {
                alert("Thanks – we'll be in touch!");
                emailInput.value = '';
            } else {
                throw new Error('Submission failed');
            }
        } catch (error) {
            console.error('Waitlist submission error:', error);
            alert('Submission failed, please try again later');
        } finally {
            // Re-enable form
            submitBtn.disabled = false;
            submitBtn.textContent = originalText;
        }
    });
}

// Navigation Waitlist Buttons (支持多个按钮)
navWaitlistBtns.forEach(btn => {
    btn.addEventListener('click', (e) => {
        e.preventDefault();
        const waitlistSection = document.getElementById('waitlist');
        if (waitlistSection) {
            waitlistSection.scrollIntoView({ 
                behavior: 'smooth' 
            });
        }
    });
});

// Modal Functionality
if (sampleButton && modal && closeModal) {
    sampleButton.addEventListener('click', () => {
        modal.style.display = 'block';
        document.body.style.overflow = 'hidden';
        
        // Add fade-in animation to gallery items
        const galleryItems = document.querySelectorAll('.poster-item');
        galleryItems.forEach((item, index) => {
            item.style.opacity = '0';
            item.style.transform = 'translateY(20px)';
            setTimeout(() => {
                item.style.transition = 'all 0.4s ease';
                item.style.opacity = '1';
                item.style.transform = 'translateY(0)';
            }, index * 100);
        });
    });

    closeModal.addEventListener('click', () => {
        modal.style.display = 'none';
        document.body.style.overflow = 'auto';
    });

    window.addEventListener('click', (e) => {
        if (e.target === modal) {
            modal.style.display = 'none';
            document.body.style.overflow = 'auto';
        }
    });
}

// Escape key to close modal
document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape' && modal && modal.style.display === 'block') {
        modal.style.display = 'none';
        document.body.style.overflow = 'auto';
    }
});

// Testimonials Carousel
if (testimonials.length > 0) {
    let currentTestimonial = 0;

    function showNextTestimonial() {
        testimonials[currentTestimonial].classList.remove('active');
        currentTestimonial = (currentTestimonial + 1) % testimonials.length;
        testimonials[currentTestimonial].classList.add('active');
    }

    // Auto-rotate testimonials every 4 seconds
    setInterval(showNextTestimonial, 4000);
}

// Intersection Observer for Fade-in Animations
const observerOptions = {
    threshold: 0.1,
    rootMargin: '0px 0px -50px 0px'
};

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.classList.add('visible');
        }
    });
}, observerOptions);

// Add fade-in class to sections and observe them
document.addEventListener('DOMContentLoaded', () => {
    const sections = document.querySelectorAll('section, .hero-content');
    
    sections.forEach(section => {
        section.classList.add('fade-in');
        observer.observe(section);
    });
    
    // Also observe feature cards and waitlist card
    const cards = document.querySelectorAll('.feature-card, .waitlist-card');
    cards.forEach((card, index) => {
        card.classList.add('fade-in');
        card.style.transitionDelay = `${index * 0.1}s`;
        observer.observe(card);
    });
    
    // Poster item click effects
    const posterItems = document.querySelectorAll('.poster-item');
    posterItems.forEach(item => {
        item.addEventListener('click', (e) => {
            e.stopPropagation();
            
            // Add a subtle feedback effect
            item.style.transform = 'scale(0.98)';
            setTimeout(() => {
                item.style.transform = 'scale(1)';
            }, 150);
        });
    });
});

// Smooth scrolling for any anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
            target.scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            });
        }
    });
}); 

// How It Works Animation
function initHowItWorksAnimation() {
    const workflowSteps = document.querySelectorAll('.workflow-step');
    const workflowArrows = document.querySelectorAll('.workflow-arrow');
    
    // Initially hide elements for animation
    workflowSteps.forEach(step => {
        step.style.opacity = '0';
        step.style.transform = 'translateY(30px)';
    });
    
    workflowArrows.forEach(arrow => {
        arrow.style.opacity = '0';
    });
    
    // Create intersection observer
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                // Trigger animations
                workflowSteps.forEach((step, index) => {
                    setTimeout(() => {
                        step.style.opacity = '1';
                        step.style.transform = 'translateY(0)';
                        step.style.transition = 'all 0.8s ease';
                    }, index * 200);
                });
                
                workflowArrows.forEach((arrow, index) => {
                    setTimeout(() => {
                        arrow.style.opacity = '1';
                        arrow.style.transition = 'opacity 0.8s ease';
                    }, (index + 1) * 200 + 100);
                });
                
                // Unobserve after animation
                observer.unobserve(entry.target);
            }
        });
    }, {
        threshold: 0.2
    });
    
    // Observe the how-it-works section
    const howItWorksSection = document.getElementById('how-it-works');
    if (howItWorksSection) {
        observer.observe(howItWorksSection);
    }
}

// Update the DOMContentLoaded event listener
document.addEventListener('DOMContentLoaded', function() {
    initHowItWorksAnimation();
    
    // Also observe feature cards and waitlist card
    const cards = document.querySelectorAll('.feature-card, .waitlist-card');
    cards.forEach((card, index) => {
        card.classList.add('fade-in');
        card.style.transitionDelay = `${index * 0.1}s`;
        observer.observe(card);
    });
    
    // Poster item click effects
    const posterItems = document.querySelectorAll('.poster-item');
    posterItems.forEach(item => {
        item.addEventListener('click', (e) => {
            e.stopPropagation();
            
            // Add a subtle feedback effect
            item.style.transform = 'scale(0.98)';
            setTimeout(() => {
                item.style.transform = 'scale(1)';
            }, 150);
        });
    });
}); 